<template>
  <div class="store-serve-addr-dlg-cpt order-header">
    <van-popup v-model="dialogVisible" round closeable position="bottom" :style="{ height: '80vh', width: '100%' }">
      <div class="self-address-dailog">
        <div class="self-address-title">
          请选择门店服务地址
        </div>
  
        <!-- <div class="self-address-choose" @click="showAreaPop = true">
          <span>选择地址</span>
          <span class="addr-info">{{ selectAddressTxt }}</span>
        </div> -->
  
        <div class="self-address-wrap">
          <div class="tips">推荐距离最近的门店服务地址</div>
          <!--地址列表-->
    
          <div class="box-wrap">
            <van-radio-group
              icon-size="16" color="#CCCCCC" checked-color="#F20B22" direction="horizontal" v-model="addressId">
              <div
                v-for="(item) in addressList"
                @click="handleClickAddrChoose(item)"
                :key="item.self_address_id"
                class="self-address-wrap-item">
                <van-radio  :name="item.self_address_id">
                  <div class="item-info">
                    <div class="item-info-user">
                      <span class="name">{{ item.name }}</span>
                      <span class="tel">{{ item.phone || item.mobile }}</span>
                    </div>
                    <div class="item-info-address">{{ item.province_city_area }} {{ item.address }}</div>
                  </div>
                </van-radio>
              </div>
  
            </van-radio-group>
          </div>
          
        </div>
      </div>
    </van-popup>
    
    <map-area :visible.sync="showAreaPop" @onSelect="handleConfirm"></map-area>
  </div>

</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020-05-28 20:45:34
   * @Last Modified by: gaogm
   */
  import Vue from 'vue'
  import { Popup } from 'vant'
  import { RadioGroup, Radio } from 'vant'

  Vue.use(Radio).use(RadioGroup)
  Vue.use(Popup)
  import mapArea from '@/components/mapArea'
  import { reqPostServeAddrList } from '@/api/order/order'
  export default Vue.extend({
    name: 'store-serve-addr-dlg-cpt',
    components: {
      mapArea
    },
    data() {
      return {
        dialogVisible: false,
        showAreaPop: false,
        addressId: '',
        selectAddressTxt: '请选择省市区',
        addressList: [], // 地址列表
        addressListBefore: [], // 上一次的地址列表
        postData: {
          scanCode: '',
          addressId: '',
          province_id: '',
          city_id: '',
          area_id: '',
          latitude: '',
          longitude: '',
          address_id: '',
          item_ids: [],
          type: '',
          goods_info: {}
        }
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      shipType: {
        type: String,
        default: ''
      },
      buyLists: {
        type: Array,
        default: () => {
          return []
        }
      },
      latitude: {
        type: [Number, String]
      },
      longitude: {
        type: [Number, String]
      },
      selectLastLocation: {
        type: [Number, String]
      }
    },
    watch: {
      dialogVisible(val) {
        this.$emit('update:visible', val)
      },
      visible(val) {
        this.dialogVisible = val
      },
      shipType(val) {
        this.selfAddressCountFn('auto')
      }
    },
    mounted() {
      !this.shipType && this.selfAddressCountFn('auto')
    },
    methods: {
      handleClickAddrChoose(item) {
        this.$emit('getSelfAddress', item)
      },
      /**
       * 省市区地址的确认
       */
      handleConfirm(val) {
        this.selectAddressTxt = `${val.province_name} ${val.city_name ? val.city_name : ''} ${val.area_name ? val.area_name : ''}`
        this.showAreaPop = false
        // province_id city_id area_id
        this.postData.province_id = val.province_id
        this.postData.city_id = val.city_id
        this.postData.area_id = val.area_id
        this.selfAddressCountFn('search')
      },
      /**
       * 关闭弹窗
       */
      handleCloseDialog() {
        this.dialogVisible = false
      },
      /**
       * 自提地址列表
       */
      selfAddressCountFn(type, lat, lng) {
        // 避免重复请求
        if (lat && this.latitude) {
          return
        }

        const ids = []
        const buyLists = this.buyLists
        const goods_info = {}
        buyLists.forEach(item => {
          ids.push(item.item_id)
          goods_info[item.item_id] = {
            sku_id: item.sku_id,
            num: item.num
          }
        })
        this.postData.goods_info = goods_info
        this.postData.item_ids = ids
        this.postData.latitude = this.latitude || lat
        this.postData.longitude = this.longitude || lng
        this.$loadingWrap.show()
        // // console.log(this.buyLists, 11111)
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        this.postData.type = this.shipType
        reqPostServeAddrList(this.postData).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            // this.dialogVisible = true
            this.addressListBefore = res.data.before
            if (res.data.is_priority_store == 1) { // 上级门店自提 默认展示不打开弹层
              this.$emit('getSelfAddress', res.data.priority_store)
              this.dialogVisible = false
            } else {
              if (res.data.before && res.data.before.length > 0 && this.selectLastLocation) { // 已选过门店
                this.$emit('getSelfAddress', res.data.before[0])
                this.dialogVisible = false
              } else {
                this.$emit('getSelfAddress', {})
              }
            }
            this.addressList = res.data.recommend
            const dataTimeArr = [ // 日期选择组件需要的格式
              { values: res.data.month_item_list ? res.data.month_item_list : [] },
              { values: res.data.store_reservation_service_time ? res.data.store_reservation_service_time : [] }
            ]
            this.$emit('getDateTime', dataTimeArr)
          } else {
            if (type == 'search') {
              this.dialogVisible = true
            } else {
              this.dialogVisible = false
            }
            this.$Error(res.data.msg)
          }
        })
      },
      /**
       * 弹窗中的输入框失去焦点时页面复原
       */
      blurEvent() {
        window.scroll(0, 0)
      }
    }
  })
</script>

<style lang="scss">
  .self-address-dailog{
    width: 100%;
    min-height: 100%;
    background: #F7F7F7;
    padding-bottom: 20px;
    .self-address{
      &-title{
        font-size: 30px;
        color: #333;
        text-align: center;
        font-weight: bold;
        background: #fff;
      }
      &-choose{
        padding: 0 24px;
        font-size: 26px;
        color: #333;
        background: #fff;
        display: flex;
        align-items: center;
        .addr-info{
          color: #666;
        }
      }
      &-wrap{
        padding: 0 25px;
        .tips{
          line-height: 76px;
          height: 76px;
        }
        .box-wrap{
        
        }
        &-item{
          background: #fff;
          padding: 36px 30px;
          border-radius: 20px;
          margin-bottom: 20px;
          width: 100%;
          .item-info{
            &-user{
              font-size: 32px;
              color: #333;
              font-weight: bold;
              margin-bottom: 16px;
            }
            &-address{
              font-size: 26px;
              color: #999;
              line-height: 38px;
            }
          }
        }
      }
    }
  }
</style>
